<template>
  <div id="search">
    <!-- 搜索框 -->
    <div class="searching">
      <img src="~@/images/search/search.jpg" alt="">

      <el-row class="demo-autocomplete">
        <el-col :span="12">
          <!-- <div class="sub-title">激活即列出输入建议</div> -->
          <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" 
          placeholder="请输入感兴趣的商品" @select="handleSelect"></el-autocomplete>
        </el-col>

        <!-- <el-col :span="12">
          <div class="sub-title">输入后匹配输入建议</div>
          <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>
        </el-col> -->
      </el-row>

      <!-- 搜索按钮 -->
      <el-button class="search-button" type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
    </div>
  </div>
</template>

<script>
import {request} from '@/network/request'

export default {
  data() {
    return {
      goods: [],
      state1: ''
    };
  },
  // computed: {
  //   state1() {
  //     return this.$store.state.queryKeyword
  //   }
  // },
  methods: {
    querySearch(queryString, cb) {
      var goods = this.goods;
      var results = queryString ? goods.filter(this.createFilter(queryString)) : goods;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { "value": "手机" },
        { "value": "电脑" },
        { "value": "座椅" },
        { "value": "书包" },
        { "value": "行李箱" },
        { "value": "暖水瓶" },
        { "value": "晾衣架" },
        { "value": "雨伞" },
        { "value": "篮球" },
        { "value": "足球" },
        { "value": "书本" },
        { "value": "棉被" },
        { "value": "水盆" },
        { "value": "玩偶" },
        { "value": "手电筒" },
        { "value": "台灯" },
        { "value": "剪刀" },
        { "value": "自行车" },
        { "value": "摩托车" },
      ];
    },
    handleSelect(item) {
      // console.log(item);
    },
    searchClick() {
      // 点击搜索按钮，改变状态中的queryKeyword
      // console.log(this.state1);
      this.$store.commit('changeQueryKeyword', this.state1)
      // 路由为'/search_result'的时候，点击搜索按钮直接向服务器发送queryKeyword和searchGoodsWant
      // 路由为'/search_result'的时候，跳转到空页面，再跳转到搜索结果页面
      if(this.$route.path === '/search_result') {
        // request({
        //   url: '/goods-want/searchGoods',
        //   method: 'get'
        // }).then(res => {
          
        // }).catch(err => {
        //   console.log(err);
        // })
        this.$router.replace('/blank')
      // 否则跳转到路由'/search_result'
      } else {
        this.$router.push('/search_result')
      }
    }
  },
  mounted() {
    this.goods = this.loadAll();
    // 进入到商品搜索界面时，搜索框内显示查询关键字
    // if(this.$route.path == '/search_result') {
      // 搜索框显示查询关键字
      this.state1 = this.$store.state.queryKeyword
    // }
  }
}
</script>

<style scoped>
  #search {
    height: 100px;
    font-size: 15px;
    padding-top: 35px;
    width: 55%;
    margin: 0 auto;
  }

  /* #searchBox {
  } */
  
  #search .searching img {
    float: left;
    transform: translateY(-30px);
    margin-right: 60px;
  }

  #search .searching .inline-input {
    width: 500px;
    /* border-radius: 50%; */
  }

  #search .searching .demo-autocomplete {
    float: left;
    /* width: 80%; */
  }

  #search .searching .search-button {
    float: left;
  }

</style>